<template>
  <div>
    <!-- 模糊搜索的表单 -->
    <el-form @submit.native.prevent :inline="true" class="demo-form-inline">
      <el-form-item label="电影名">
        <el-input
          @keyup.native.enter="search"
          v-model="name"
          placeholder="请输入电影名称关键字"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">电影列表</el-divider>

    <!-- 电影列表 -->
    <el-table :data="moviesData.result">
      <el-table-column align="center" label="封面" width="100px">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="" width="60px" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="标题"
        prop="title"
      ></el-table-column>
      <el-table-column
        align="center"
        label="主演"
        prop="star_actor"
        width="240px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="上映时间"
        prop="showingon"
        width="100px"
      ></el-table-column>
      <el-table-column align="center" label="时长" width="100px">
        <template slot-scope="scope"> {{ scope.row.duration }} 分钟 </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="电影类别"
        prop="type"
        width="150px"
      ></el-table-column>
      <el-table-column align="center" label="操作" width="230">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="info"
            icon="el-icon-user-solid"
            circle
          ></el-button>
          <el-button
            size="small"
            type="success"
            icon="el-icon-picture-outline"
            circle
          ></el-button>
          <el-button
            size="small"
            type="warning"
            icon="el-icon-edit"
            circle
            @click="$router.push(`/home/movie-update/${scope.row.id}`)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteItem(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <br />
    <el-pagination
      background
      :page-size="moviesData.pagesize"
      layout="->,prev, pager, next,total,jumper"
      :total="moviesData.total"
      @current-change="chanageCurrentPage"
    >
    </el-pagination>
  </div>
</template>
<script>
import httpApi from '@/http'
export default {
  data() {
    return {
      name: '',
      moviesData: {
        //存储电影列表相关信息
        page: 1, //当前页
        pagesize: 3, //每页多少条
        total: 0, //总条目数
        result: [], //储存具体电影列表
      },
    }
  },
  methods: {
    /**删除电影 */
    deleteItem(id) {
      this.$confirm('此操作将永久删除该电影, 是否继续?', '提示', {
        confirmButtonText: '残忍删除',
        cancelButtonText: '我再想想',
        type: 'warning',
      }).then(res => {
        httpApi.MovieApi.delete({ id }).then(res => {
          this.$message({
            type: 'success',
            message: '恭喜,删除成功',
          })
          this.search()
        })
      })
    },
    /**点击查询按钮后执行.需要判断输入框中是否有关键字 */
    search() {
      if (this.name.trim() == '') {
        this.listMovies()
      } else {
        this.listMoviesByName()
      }
    },
    /**模糊查询电影列表 */
    listMoviesByName() {
      let params = {
        name: this.name.trim(),
        page: this.moviesData.page,
        pagesize: this.moviesData.pagesize,
      }
      httpApi.MovieApi.queryAllByNameLike(params).then(res => {
        this.moviesData = res.data.data
      })
    },
    /**当分页器当前页改变时执行 */
    chanageCurrentPage(page) {
      console.log(page)
      this.moviesData.page = page //修改当前页码后,查询电影列表
      this.search()
    },
    /**加载电影列表 */
    listMovies() {
      httpApi.MovieApi.queryAll({
        page: this.moviesData.page,
        pagesize: this.moviesData.pagesize,
      }).then(res => {
        console.log('加载电影列表', res)
        this.moviesData = res.data.data
      })
    },
  },
  mounted() {
    //初始化加载电影列表 首页,每页5条
    this.listMovies()
  },
}
</script>
<style lang="scss" scoped></style>
